<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .comeContent{
            width: 10.2rem;
            background-color: #ccc;
        }
    </style>
</head>
<body>
<div class="comeContent fl">
    <div id="barTwo" style="width: 8.9rem;height: 4.3rem;"></div>
</div>
</body>
<script src="preview/js/jquery-3.2.1.min.js"></script>
<script src="preview/js/echarts.min.js"></script>
<script>
    var barTwo,barTwoChart,timeTicket=null,currentSize;
    function getRem(prem,pwidth){
        var html = document.getElementsByTagName("html")[0];
        var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
        html.style.fontSize = oWidth/pwidth*prem + "px";
        return oWidth/pwidth*prem;
    }
    function randomData() {
        now = new Date(+now + oneDay);
        value = value + Math.random() * 21 - 10;
        return {
            name: now.toString(),
            value: [
                [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
                Math.round(value)
            ]
        }
    }
    var data = [];
    var now = +new Date(1997, 9, 3);
    var oneDay = 24 * 3600 * 1000;
    var value = Math.random() * 1000;
    for (var i = 0; i < 1000; i++) {
        data.push(randomData());
    }


    function createCanvas(){

        barTwo = {
            title: {
                text: '动态数据 + 时间坐标轴'
            },
            tooltip: {
                trigger: 'axis',
                formatter: function (params) {
                    params = params[0];
                    var date = new Date(params.name);
                    return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
                },
                axisPointer: {
                    animation: false
                }
            },
            xAxis: {
                type: 'time',
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                splitLine: {
                    show: false
                }
            },
            series: [{
                name: '模拟数据',
                type: 'line',
                showSymbol: false,
                hoverAnimation: false,
                data: data
            }]
        };


        barTwoChart = echarts.init(document.getElementById('barTwo'));
        barTwoChart.setOption(barTwo);

    }
    function move(){
        setInterval(function () {

            for (var i = 0; i < 5; i++) {
                data.shift();
                data.push(randomData());
            }

            barTwoChart.setOption({
                series: [{
                    data: data
                }]
            });
        }, 1000);

    }
    window.onresize = function(){
        currentSize=getRem(100,1020);
        createCanvas();
        barTwoChart.resize();
        move();
    };
    window.onload = function(){
        currentSize=getRem(100,1020);
        createCanvas();
        move();
    };

</script>

</html>